<template>
	<div class="all1">
			<div class="header1">
				网关设备数据统计
				<span id="localtime" style=" font-size:14px;position: absolute; right: 30px; top:-20px; ">{{nowTime}}</span>
			</div>
			<div id="content1">
				<div class="content_center1">
					<div class="center_top1">
						<el-page-header @back="goBack" @click="goBack()" >
						</el-page-header>
						<div class="title1"><img :src="image1" /> 
							<span>平台数据分布&nbsp;&nbsp;-&nbsp;&nbsp;{{this.$route.query.province}}</span>
						</div>
						<div class="center_top_con1" id="distribution_map"></div>
						<!-- <div class="center_top_con" id="distribution_map1" :style="display1"></div> -->
					</div>
				</div>
			</div>
		</div>
</template>

<script>
import axios from 'axios'
	export default{
		data(){
			return{
				image1:require("../images/icon03.png"),
				nowTime:'',
				echartObj: null,
				v:'',
				option: {
				  title: {
				    text: '',
				    top: '8%',
				    left: '8%',
				    textStyle: {
				      fontSize: 14,
				      fontWeight: 300,
				      color: '#000'
				    }
				  },
				  tooltip: {
				    padding: 0,
				    // 数据格式化
				    formatter: function (params, callback) {
				      return params.name 
				    }
				  },
				  legend: {
				    orient: 'vertical',
				    top: '9%',
				    left: '5%',
				    icon: 'circle',
				    data: [],
				    selectedMode: 'single',
				    selected: {},
				    itemWidth: 12,
				    itemHeight: 12,
				    itemGap: 30,
				    inactiveColor: '#b6d7ff',
				    textStyle: {
				      color: '#ec808d',
				      fontSize: 14,
				      fontWeight: 300,
				      padding: [0, 0, 0, 15]
				    }
				  },
				  visualMap: {
				    min: 0,
				    max: 500,
				    left: 'left',
				    top: 'bottom',
				    text: ['高', '低'], // 取值范围的文字
				    inRange: {
				      color: ['#e0ffff', 'blue'] // 取值范围的颜色
				    },
				    show: true // 图注
				  },
				  geo: {
				    map: '',
				    roam: true, // 不开启缩放和平移
				    zoom: 1, // 视角缩放比例
				    label: {
				      normal: {
				        show: true,
				        fontSize: 10,
				        color: '#000'
				      },
				      emphasis: {
				        show: true,
				        color: 'blue',
				      }
				    },
				    itemStyle: {
				      normal: {
				        borderColor: 'rgba(0, 0, 0, 0.2)'
				      },
				      emphasis: {
				        areaColor: 'skyblue', // 鼠标选择区域颜色
				        shadowOffsetX: 0,
				        shadowOffsetY: 0,
				        shadowBlur: 20,
				        borderWidth: 0,
				        shadowColor: 'rgba(0, 0, 0, 0.5)'
				      }
				    },
				    left: '5%',
				    right: '5%',
				    top: '5%',
				    bottom: '5%'
				  },
				  series: [
				    {
				      name: '省份数据',
				      type: 'map',
				      geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
				      data: []
				    },
						{
							name:'网关分布',
							type:'custom',
							coordinateSystem:'geo',
							clickable:true,
							data:[]
						}
				  ],
				  provinceJSON: {},
				  provinceName: '',
				  list:'',
				  markList:''
				}
			}
		}, 
		created() {
			this.showTimes();
			axios({
				url:"http://localhost:8080/gateway/getList",
				method:'post',
				data:{
					province:this.$route.query.province
				},
			}).then(res=>{
				this.list=res.data.data;
				this.initP(this.list);
			})
		},
		methods:{
			timeFormate(timeStamp) {
			      let year = new Date(timeStamp).getFullYear();
			      let month =
			        new Date(timeStamp).getMonth() + 1 < 10
			          ? "0" + (new Date(timeStamp).getMonth() + 1)
			          : new Date(timeStamp).getMonth() + 1;
			      let date =
			        new Date(timeStamp).getDate() < 10
			          ? "0" + new Date(timeStamp).getDate()
			          : new Date(timeStamp).getDate();
			      let hh =
			        new Date(timeStamp).getHours() < 10
			          ? "0" + new Date(timeStamp).getHours()
			          : new Date(timeStamp).getHours();
			      let mm =
			        new Date(timeStamp).getMinutes() < 10
			          ? "0" + new Date(timeStamp).getMinutes()
			          : new Date(timeStamp).getMinutes();
			      let ss =
			        new Date(timeStamp).getSeconds() < 10
			          ? "0" + new Date(timeStamp).getSeconds()
			          : new Date(timeStamp).getSeconds();
			      let week = new Date(timeStamp).getDay();
			      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
			      let getWeek = "星期" + weeks[week];
			      this.nowTime=year +"年" +month +"月" +date +"日" +" " +hh +":" + mm + ":" + ss + getWeek;
			    },
			    showTimes() {
			      this.timeFormate(new Date());
			      setInterval(this.showTimes, 1000);
			      // this.clear();
			    },
				initP(markList){
					
					const provinceName = this.$route.query.provinceName
					const province = this.$route.query.province
					this.provinceName = provinceName
					this.provinceJSON = require('../../utils/省份数据/json(省份)/' + provinceName)
					// this.option.title.text = province;
					this.option.geo.map = province
					this.echartObj = this.$echarts.init(document.getElementById("distribution_map"))
					this.$echarts.registerMap(province, this.provinceJSON)
					this.setMark(markList);
					this.echartObj.setOption(this.option);
					this.echartObj.on('click', {element: 'aaa'}, (params) => {
					        console.log(params.data.id)
							this.$router.push({
								path:"/user/gatewayInfo",
								query:{id:params.data.id},
							})
					      });
					// this.echartObj.on("click", (params) => {
					//   // this.$router.push({
					//   //   path: "/city",
					//   //   query: { city: params.name },
					//   // });
					// });
					// var geo = this.echartObj.getModel().getComponent('geo').coordinateSystem;
					// var region = geo.getRegion('武汉市');
					// var rect = region.getBoundingRect();
					// console.log(rect.x,rect.y)
				},
				setMark(markList){
						this.option.series[1].data=markList
						if(markList.length>0){
							this.option.series[1].renderItem=function(params,api){
								return{
									type:'image',
									name:'aaa',
									style:{
										image: require("../images/position.png"), //标注点图标
											              width: 24,
											              height: 28,
											              x: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[0],
											              y: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[1]
									}
								}
							}
						}
				},
				goBack () {
				  this.$router.go(-1)
				},
		},
		mounted() {
			
		}
	}
</script>

<style>
.all1{
		font-family: "微软雅黑";
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		background-color: #0b122e;
		color: #fff;
		position: relative;
		font-family: "微软雅黑";
}
.header1{
		width:100%;
		height: 10vh;
		background: url(../images/bg_top.png) center no-repeat ; 
		text-align: center; 
		font-size: 36px; 
		color: #00f6ff;
		line-height: 90px;
		margin: 0 auto;
}
table
  {border-collapse:collapse;}
img{vertical-align: middle;}
ul { margin: 0; padding: 0;}
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
	overflow: hidden;
}

.clearfix {
	*zoom: 1;
}
#content1{
	width: 100%;
	height: 85vh;
	margin: 30px auto 0 auto;
}
.content_center1{
	width: 60%;
	height: 95%;
	margin-left: 20%;
	background-color: red;
	background: url(../images/center01.png) no-repeat;
	border: #13CE66;
}
.center_top1{width: 1050px; height: 650px;  float: left; background: url(../images/center01.png) no-repeat;}
.title1{
	width: 100%;
	height: 10%; float: left; color: #00f6ff; font-size: 20px; line-height: 70px; 
	background:url(../images/bottom_line.png) bottom center no-repeat;
	text-align: center;}
.title1 img{vertical-align: middle;}
.center_top_con1{ 
	width: 90%;
	 height: 85%;
	margin-left: 5%;
	float: left;
	}
</style>
